<template>
  <div @touchmove.prevent>
    <div class="cf">
      <div class="cf_h">
        <span>
          <img src="../../static/images/1.jpg" alt="">
        </span>
        <span>
          <p>{{title}}</p>
          <textarea style="width:100%;height:1.6rem" v-model="des"></textarea>
        </span>
      </div>
      <!-- <p>份量：
        <span v-for="item1 in PRODUCTSIZE" :key="item1.id" @click="selectRadio1(item1,PRODUCTSIZE)" :class="{gaibian:item1.active,ungaibian:!item1.active}">{{item1.select}}</span>
      </p> -->
      <p>口味：
        <span v-for="item2 in PRODUCTTASTE" :key="item2.id" @click="selectRadio2(item2,PRODUCTTASTE)" :class="{gaibian:item2.active,ungaibian:!item2.active}">{{item2.hash.name}}</span>
      </p>
      <p style="height:200%">配菜：
        <span v-for="(item3,index) in PRODUCTADD" :key="item3.id" @click="toggleSelection(index,item3)" :class="{gaibian:checkActive(item3)}">{{item3.hash.name}}{{item3.hash.number}}</span>
      </p>
      <p>
        <b v-if="taste||this.nowIndexes.length>0" class="picked">已选：{{tastename}}<i v-if="nowIndexes.length">&nbsp;/&nbsp;</i>{{pcname[0]}}&nbsp;{{pcname[1]}}&nbsp;{{pcname[2]}}&nbsp;{{pcname[3]}}</b>
        <b v-else>已选：<i style="color:#f60">请选择口味</i></b>
        <mt-button class="ok" @click="chooseoff">确定</mt-button>
      </p>
    </div>
    <div class="cf1" @click="changisshowcf">
    </div>
  </div>

</template>

<script>
import Vue from 'vue';
import _ from 'lodash';

export default {
  props: {
    changisshowcf: {},
    gocfData: {},
    sid: String,
  },
  data() {
    return {
      ts: this.newStore(),
      choosedList: [],
      pcname: [],
      nowIndexes: [],
      tastename: '',
      title: '',
      des: '',
      size: '',
      taste: '',
      check: [],
      PRODUCTTASTE: [],
      PRODUCTADD: [],
    };
  },
  watch: {
    gocfData(val) {
      this.title = `${val.hash.pname}(${val.hash.fromat})`;
      this.des = val.hash.description;
    },
  },
  created() {
    this.getkouwei();
    this.getpeicai();
  },
  methods: {
    toggleSelection(index, item3) {
      if (this.nowIndexes.indexOf(item3.hash.code) === -1) {
        this.nowIndexes.push(item3.hash.code);
        this.pcname.push(item3.hash.name);
      } else {
        this.nowIndexes = _.remove(this.nowIndexes, idx => idx !== item3.hash.code);
        this.pcname = _.remove(this.pcname, idx => idx !== item3.hash.name);
      }
    },
    checkActive(item3) {
      return this.nowIndexes.indexOf(item3.hash.code) !== -1;
    },
    chooseoff() {
      const res = {
        handle: '1E8254760FECAC00839BD73D1C4F9A654A225EA7D9630777FBADB90B8161F24C',
        schoolid: this.sid,
        pickid: '',
        productid: this.gocfData.hash.pid,
        taste: this.taste,
        dishes: this.nowIndexes.join('|'),
      };
      if (this.taste) {
        this.spost(this.ts, '/mainservlet', res).then((ts) => {
          const gocfData = ts.d.data.operation2;
          this.$emit('getChoosedData', gocfData, ts.d.data.operation1[0].hash.cartid);
          this.changisshowcf();
        });
      } else {
        this.$messagebox.alert('请选择口味', '提示');
      }
    },
    selectRadio2(list, arr1) {
      this.$nextTick(() => {
        arr1.forEach((list1) => {
          Vue.set(list1, 'active', false);
        });
        Vue.set(list, 'active', true);
        this.tastename = list.hash.name;
        this.taste = list.hash.code;
      });
    },
    getkouwei() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D6717C3E398B19466F8073FD3E560A414',
        productid: '2',
        type: '1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.PRODUCTTASTE = ts.d.data.operation1;
      });
    },
    getpeicai() {
      const req = {
        handle: '1E8254760FECAC00839BD73D1C4F9A6559B7AE69B5ABEA2D6717C3E398B19466F8073FD3E560A414',
        productid: '2',
        type: '2',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.PRODUCTADD = ts.d.data.operation1;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.picked
  width: 70vw;
  overflow: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
.cf_h
  display flex
  justify-content space-between
  img
    max-width 100%
  span
    float left
    &:first-child
      width 40%
      margin-right 0.3rem
    &:last-child
      width 60%
      p
        height 0.4rem
        line-height 0.4rem
        border none
        &:first-child
          font-size 0.4rem

.cf1
  background black
  position fixed
  min-height 100vh
  width 100%
  top 0
  left 0
  opacity 0.3
  z-index 2
.ungaibian
  background #fff
.gaibian
  background #dec0e9
.ok
  float right
  height 0.6rem
  line-height 0.6rem
  margin-top 0.1rem
  font-size 0.28rem
  color: #fff;
  background-color: #26a2ff;
.cf
  border-radius 0.1rem
  background #fff
  position fixed
  top 30%
  width 94%
  left 3%
  padding 0.1rem
  z-index 999
  p
    height 0.8rem
    line-height 0.8rem
    margin-bottom 0.1rem
    display flex
    justify-content space-between
    &:last-child
      border-top 1px solid #ccc
    span
      padding 0 0.1rem
</style>

